<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>财务管理</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>财务管理</el-breadcrumb-item>
                    <el-breadcrumb-item>充值记录</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="8">
                <div class="layout-page-heading-action">
                    <el-button type="primary" onclick="router.push('add')"><i class="fa fa-plus"></i>充值</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="layout-page-box">
            <el-form :inline="true" label-width="80px" label-position="right" :model="filters" class="search-form">
                <el-form-item label="商户">
                    <el-select clearable v-model="filters.agent_id">
                        <el-option :value="item.id" :label="item.name" v-for="item in agentList" :key="item.id">
                            {{item.name}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()"><i class="fa fa-search"></i>查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="layout-page-box">
            <el-table
                    :data="list"
                    border
                    @sort-change="sortChanged"
                    style="min-width: 1000px;width:100%">
                <el-table-column
                        fixed="left"
                        type="index"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="agent_name"
                        label="商户名称"
                        min-width="160px">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="充值金额(元)"
                        min-width="120px">
                </el-table-column>
                <el-table-column
                        prop="pay_date"
                        label="充值时间">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注">
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="pageChanged"
                    :current-page="filters.pagination.page"
                    :page-size="filters.pagination.limit"
                    layout="total, prev, pager, next, jumper"
                    :total="filters.pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                filters: {
                    column: {
                        title: '',
                        agent_id: '',
                        create_date: ''
                    },
                    pagination: {
                        page: 1,
                        limit: 10,
                        total: 0
                    }
                },
                list: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        },
        methods: {
            search(){
                this.refresh();
            },
            pageChanged(page) {
                this.filters.pagination.page = page
                this.refresh()
            },
            sortChanged(sort) {
                this.filters.order = _g.sortFilter(sort)
                this.refresh()
            },
            refresh(){
                this.query()
            },
            query(){
                var start_date = '';
                var end_date = '';
                if (this.filters.column.create_date) {
                    var dates = this.filters.column.create_date;
                    if (dates instanceof Array) {
                        start_date = dates[0];
                        end_date = dates[1];
                    }
                }

                var queries = {
                    agent_id: this.filters.column.agent_id,
                    name: this.filters.column.name,
                    start_date: start_date,
                    end_date: end_date,
                    page: this.filters.pagination.page,
                    limit: this.filters.pagination.limit,
                    order: this.filters.order
                }

                api.request('finance/recharge/search', queries, 'POST').then((res) => {
                    this.list = res.data.list
                    this.filters.pagination.total = parseInt(res.data.total)
                })
            },
            getList(){
                api.request('info/agent/all', {}, 'POST').then((res) => {
                    this.agentList = res.data
                })
            }
        },
        mounted(){
            this.getList()
            this.query()
        }
    }
</script>

<style scoped>
    a {
        color: #1ab394;
        cursor: pointer;
    }
</style>